<template>
  <div>
    <h1 ref="app">app</h1>
    <h1>{{ msg }}</h1>
    <button @click="changeMsg">更改msg的值</button>
    <child-one v-if="flag"></child-one>
    <button @click="changeFlag">更改该flag的值</button>
  </div>
</template>

<script>
import ChildOne from "@/components/ChildOne";
export default {
  data() {
    return {
      msg: "zheshu",
      flag: true,
    };
  },
  components: {
    ChildOne,
  },
  methods: {
    changeMsg() {
      this.msg = "dekun";
    },
    changeFlag() {
      this.flag = !this.flag;
    },
  },
  // 生命周期钩子函数的前四个默认触发
  // 创建前 根元素 事件 计算 方法都为初始化完成
  beforeCreate() {
    console.log("app beforeCreate");
    // 不能获取data中的值
    console.log(this.msg);
    console.log(this.changeMsg);
    // 不可以操作DOM
    console.log(this.$refs.app);
    // $el
    console.log(this.$el);
  },
  // 创建后 数据 方法 侦听等配置完成，根源未初始化完成，不能操作DOM
  created() {
    console.log("app created");
    console.log(this.msg);
    console.log(this.changeMsg);
    console.log(this.$refs.app);
    console.log(this.$el);
  },
  // 挂载前 数据 方法 侦听等配置完成
  // vm.$el已经形成但是未挂载
  //  不能操作DOM
  beforeMount() {
    console.log("app beforeMount");
    console.log(this.msg);
    console.log(this.changeMsg);
    console.log(this.$refs.app);
    // console.log(this.$el);
  },
  // 挂载后
  // 挂载前 数据 方法 侦听等配置完成
  // vm.$el已经形并挂载
  //  能操作DOM
  // 一个组件mounted只能挂载一次
  mounted() {
    console.log("app mounted");
    console.log(this.msg);
    console.log(this.changeMsg);
    console.log(this.$refs.app);
  },
  // 更改前
  // beforeUpdate updated当发生变化时触发
  beforeUpdate() {
    console.log("app beforeUpdate");
  },
  // 更改后
  updated() {
    console.log("app updated");
  },
  // 销毁前  销毁 当组件销毁时就会触发
  // v-if 销毁与重建
  // 造个子组件 通过v-if
  beforeDestroy() {
    console.log("app beforeDestroy");
  },
  destroyed() {
    console.log("app destroyed");
  },
};
</script>

<style lang="less" scoped>
</style>